<template>
  <el-form label-width="90px" size="mini">
    <el-collapse value="1" class="customer-collapse">
      <chart-base-option :attribute="attribute" :has-legend="false" :has-color="false"></chart-base-option>
      <chart-xy-option :attribute="attribute"></chart-xy-option>
      <el-collapse-item title="线条">

        <tm-group label="标记">
          <el-form-item label="是否显示">
            <el-switch v-model="attribute.series.showSymbol "/>
          </el-form-item>
          <el-form-item label="大小">
            <el-input-number v-model="attribute.series.symbolSize "/>
          </el-form-item>
          <el-form-item label="形状">
            <tm-select v-model="attribute.series.symbol" :data="symbolList"></tm-select>
          </el-form-item>
          <el-form-item label="自定义形状">
            <el-input v-model="attribute.series.symbol"/>
          </el-form-item>
        </tm-group>
         <tm-group label="线条">
           <el-form-item label="颜色">
             <el-color-picker v-model="attribute.series.lineStyle.color "/>
           </el-form-item>
           <el-form-item label="宽度">
             <el-input-number v-model="attribute.series.lineStyle.width "/>
           </el-form-item>
         </tm-group>

        <tm-group label="光标">
          <el-form-item label="颜色">
            <el-color-picker v-model="attribute.lines.color "/>
          </el-form-item>
          <el-form-item label="大小">
            <el-input-number v-model="attribute.lines.symbolSize "/>
          </el-form-item>
          <el-form-item label="时间">
            <el-input-number v-model="attribute.lines.period "/>
          </el-form-item>
          <el-form-item label="拖尾">
            <el-input-number :min="0" :max="1" :step="0.1" v-model="attribute.lines.trailLength "/>
          </el-form-item>
        </tm-group>

      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
import chartBaseOption from '../chart-base-option'
import chartXyOption from '../chart-xy-option'
import tmSelect from "@/package/components/tm-select";

export default {
  name: 'bar01-option',
  cnName: 'bar01-option',
  components: {
    chartBaseOption,
    chartXyOption,
    tmSelect
  },
  props: {
    attribute: Object
  },
  data() {
    return {
      directionList: [
        {label: '竖向', value: '0'},
        {label: '横向', value: '1'}
      ],
      symbolList: [
        {label: 'emptyCircle', value: 'emptyCircle'},
        {label: 'circle', value: 'circle'},
        {label: 'rect', value: 'rect'},
        {label: 'roundRect', value: 'roundRect'},
        {label: 'triangle', value: 'triangle'},
        {label: 'diamond', value: 'diamond'},
        {label: 'pin', value: 'pin'},
        {label: 'arrow', value: 'arrow'},
        {label: 'none', value: 'none'}
      ],
      lineList: [
        {label: 'solid', value: 'solid'},
        {label: 'dotted', value: 'dotted'},
        {label: 'dashed', value: 'dashed'}
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>
